//类组件
import { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      num:{
        a:0
      }
      // num:1
    };
  }
  add(){
    // let data =this.state.num
    // data.a=data.a+1
    // console.log(this);
    
    this.setState((state)=>{
      let data =state.num
      data.a=data.a+1
      // console.log(state);
      // let {a} =state
      // console.log(a);
      // console.log(n); 
      return {
        num :data
      }
    })
    // this.setState({
    //   num:data
    // })
  }
  render() {
    let {num} =this.state;
    console.log("render...");
    return (
      
      <div>
        <h1>Hello React</h1>
        
        <h1>{num.a}</h1>
        {/* <h1>{num}</h1> */}
        <button onClick={()=>this.add()}>+1</button>
      </div>
    );
  }
  componentDidMount() {
    console.log("componentDidMount...");
  }
  
}
//函数式组件
// function App() {
//     return (
//       <div className="App">
//        <h1>我是app组件</h1>
//       </div>
//     );
//   }

export default App;
